@use 'sass:list';

.ui-enter-active, .admin-enter-active {
  transition: all 0.3s ease;
}

.ui-enter-from, .admin-enter-from {
  opacity: 0;
}


@mixin use-transition(
  $colors: null,
  $shadow: null,
  $scale: null,
  $opacity: null,
  $transform: null,
) {
  // 初始化空的transition列表
  $transitions: ();

  @if $colors != null {
    $transitions: list.append($transitions, background-color #{$colors}, comma);
    $transitions: list.append($transitions, color .3s, comma);
    $transitions: list.append($transitions, border-color #{$colors}, comma);
    $transitions: list.append($transitions, fill #{$colors}, comma);
  }
  @if $shadow != null {
    $transitions: list.append($transitions, box-shadow #{$shadow}, comma);
    $transitions: list.append($transitions, border-radius #{$shadow}, comma);
    $transitions: list.append($transitions, filter #{$shadow}, comma);
  }
  @if $scale != null {
    $transitions: list.append($transitions, scale #{$scale}, comma);
    $transitions: list.append($transitions, height #{$scale}, comma);
    $transitions: list.append($transitions, width #{$scale}, comma);
    $transitions: list.append($transitions, max-height #{$scale}, comma);
    $transitions: list.append($transitions, max-width #{$scale}, comma);
  }
  @if $opacity != null {
    $transitions: list.append($transitions, opacity #{$opacity}, comma);
  }
  @if $transform != null {
    $transitions: list.append($transitions, transform #{$transform}, comma);
  }

  // 如果$transitions不为空，则应用transition属性
  @if list.length($transitions) > 0 {
    transition: $transitions !important;
  }
}

.use-transitions-long {
  @include use-transition($colors: 1.5s, $shadow: .5s, $scale: .5s, $opacity: .5s, $transform: 1s);
}

.use-transitions {
  @include use-transition($colors: 1s, $shadow: .3s, $scale: .3s, $opacity: .3s, $transform: .3s);
}

.use-transitions-size-long {
  @include use-transition($colors: 1s, $scale: 1s);
}

.use-transitions-size {
  @include use-transition($colors: 1s, $scale: 0.3s);
}

.use-transitions-shadow {
  @include use-transition($colors: 1s, $shadow: .5s);
}

.use-transitions-shadow-short {
  @include use-transition($colors: .5s, $shadow: .3s);
}

.use-transitions-colors {
  @include use-transition($colors: 1s);
}

.use-transitions-colors-short {
  @include use-transition($colors: .5s);
}